<template>
  <view>
    <CHeader title="城市选择"></CHeader>
    <CLoading :loading="dataList.length === 0" />
    <Elevator :index-list="dataList" v-if="dataList.length" :height="height" @click-item="clickItem" @click-index="clickIndex" />
    <!-- <nut-elevator :index-list="dataList" :height="height" @click-item="clickItem" @click-index="clickIndex"></nut-elevator> -->
  </view>
</template>

<script setup>
import CHeader from '@/components/c-header'
import CLoading from '@/components/c-loading'
import Elevator from '@/components/nut-elevator'

import { ref } from 'vue'
import { useDidShow, getStorageSync } from '@tarojs/taro'
import { getAreaList } from '@/api/area.cn'

const keywords = ref('')
const height = ref(500)

useDidShow(() => {
  const systemInfo = getStorageSync('SystemInfo')
  height.value = systemInfo.windowHeight - systemInfo.topBarH
  getDataList()
})

const dataList = ref([])

const getDataList = async () => {
  const { data } = await getAreaList()
  let areaList = data.sort((a, b) => {
    return a.pinYin[0].localeCompare(b.pinYin[0])
  })
  areaList = areaList.map(a => {
    return {
      ...a,
      pinYin: a.pinYin[0]
    }
  })
  dataList.value = filterList(areaList)
}

const filterList = arr => {
  const areas = []
  for (let i = 0, len = arr.length, title = arr[i].pinYin[0], list = [], j = 0; i < len; i++) {
    const { pinYin, name, code } = arr[i]
    if (pinYin !== title && list.length) {
      areas.push({ title, list })
      title = pinYin
      list = []
    }
    list.push({ name, id: code })
    if (i + 1 === len && list.length) {
      areas.push({ title, list })
    }
  }
  return areas
}

const clickItem = (key, item) => {
  console.log(key, JSON.stringify(item))
}

const clickIndex = key => {
  console.log(key)
}
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';
.nut-elevator__list__item {
  font-size: 13px;
}
.nut-elevator__list__item__name {
  height: 39px;
  line-height: 39px;
}
.nut-elevator__list__item__code {
  background: $bg-color;
}
</style>
